<template>
	<canvas class="conveyorCanvas" ref="conveyorCanvasRef" :width="width" :height="height"></canvas>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	const props = defineProps({
		//画布宽
		width: {
			type: String,
			default: '370',
		},
		//画布高
		height: {
			type: String,
			default: '400',
		},
		//贝塞尔曲线路径类型
		bseType: {
			type: String,
			default: '',
		},
		//线条宽度
		arcWidth: {
			type: Number,
			default: 70
		},
		
		//绘制损坏的高度
		damageHeight: {
			type: [String, Number],
			default: ''
		}
	});
	const conveyorCanvasRef = ref(null)

	onMounted(() => {
		const canvas = conveyorCanvasRef.value;
		const ctx = canvas.getContext('2d');

		// 定义贝塞尔曲线的控制点和起点终点
		let startX, startY, cp1X, cp2X, cp1Y, cp2Y, endX, endY
		if (props.bseType == '1-1' || props.bseType == '2-2' || props.bseType == '3-3') {
			startX = 60
			startY = 14
			cp1X = 90
			cp1Y = 220
			cp2X = 100
			cp2Y = 300
			endX = 410
			endY = 450
		} else if (props.bseType == '2-1' || props.bseType == '3-2') {
			startX = 60
			startY = 14
			cp1X = 90
			cp1Y = 220
			cp2X = 100
			cp2Y = 300
			endX = 290
			endY = 450
		} else if (props.bseType == '3-1') {
			startX = 60
			startY = 14
			cp1X = 90
			cp1Y = 220
			cp2X = 100
			cp2Y = 300
			endX = 245
			endY = 450
		} else {
			startX = 30
			startY = 20
			cp1X = 30
			cp1Y = 100
			cp2X = 30
			cp2Y = 350
			endX = 120
			endY = 450
		}

		// 横线数量
		const numLines = 5;
		// 横线间距（参数 t 的增量）
		const spacing = 0.2; // 每条横线之间的间距
		// 横线的初始位置（参数 t 的值）
		const lines = Array.from({ length: numLines }, (_, i) => i * spacing);
		
		// 绘制弧线
		function drawArc() {
		    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
		
		    // 绘制弧线
		    ctx.strokeStyle = "#0966aa"; // 弧线颜色
		    ctx.lineWidth = props.arcWidth; // 弧线宽度
		    ctx.beginPath();
		    ctx.moveTo(startX, startY);
		    ctx.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, endX, endY);
		    ctx.stroke();
		
		    // 绘制内阴影
		    ctx.save(); // 保存当前画布状态
		    ctx.globalCompositeOperation = 'source-atop'; // 设置混合模式
		    ctx.filter = 'blur(2px)'; // 添加模糊效果
		    ctx.strokeStyle = "#1399fe"; // 阴影颜色和透明度
		    ctx.lineWidth = props.arcWidth - 10; // 内阴影宽度（比弧线窄）
		    ctx.beginPath();
		    ctx.moveTo(startX, startY);
		    ctx.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, endX, endY);
		    ctx.stroke();
		    ctx.restore(); // 恢复画布状态
		}
		
		// 计算贝塞尔曲线上的点
		function getBezierPoint(t) {
		    const x =
		        Math.pow(1 - t, 3) * startX +
		        3 * Math.pow(1 - t, 2) * t * cp1X +
		        3 * (1 - t) * Math.pow(t, 2) * cp2X +
		        Math.pow(t, 3) * endX;
		    const y =
		        Math.pow(1 - t, 3) * startY +
		        3 * Math.pow(1 - t, 2) * t * cp1Y +
		        3 * (1 - t) * Math.pow(t, 2) * cp2Y +
		        Math.pow(t, 3) * endY;
		    return { x, y };
		}
		
		// 计算贝塞尔曲线的切线方向
		function getBezierTangent(t) {
		    const dx = -3 * Math.pow(1 - t, 2) * startX +
		        3 * Math.pow(1 - t, 2) * cp1X -
		        6 * (1 - t) * t * cp1X +
		        6 * (1 - t) * t * cp2X -
		        3 * Math.pow(t, 2) * cp2X +
		        3 * Math.pow(t, 2) * endX;
		    const dy = -3 * Math.pow(1 - t, 2) * startY +
		        3 * Math.pow(1 - t, 2) * cp1Y -
		        6 * (1 - t) * t * cp1Y +
		        6 * (1 - t) * t * cp2Y -
		        3 * Math.pow(t, 2) * cp2Y +
		        3 * Math.pow(t, 2) * endY;
		    return { dx, dy };
		}
		
		// 绘制横线
		function drawLine(x, y, angle, color = "#0e2854", width = props.arcWidth + 2, height = 20) {
		    ctx.save(); // 保存当前画布状态
		    ctx.translate(x, y); // 将画布原点移动到横线的中心
		    ctx.rotate(angle); // 旋转画布，使横线与切线方向一致
		
		    // 绘制横线
		    ctx.beginPath();
		    ctx.moveTo(0 / 2, 0); // 横线的左端点
		    ctx.lineTo(height / 2, 0); // 横线的右端点
		    ctx.strokeStyle = color;
		    ctx.lineWidth = width; // 横线的粗细
		    ctx.stroke();
		
		    ctx.restore(); // 恢复画布状态
		}
		
		const speed = 0.0003; // 控制横线的运动速度
		
		function animate() {
		    drawArc(); // 绘制弧线
		
		    // 更新每条横线的位置并绘制
		    for (let i = 0; i < lines.length; i++) {
		        const t = lines[i];
		
		        // 计算横线在弧线上的位置和角度
		        const point = getBezierPoint(t);
		        const tangent = getBezierTangent(t);
		        const angle = Math.atan2(tangent.dy, tangent.dx); // 计算切线角度
		
		        drawLine(point.x, point.y, angle); // 绘制横线
		
		        // 更新横线的位置
		        lines[i] += speed;
		        if (lines[i] > 1) {
		            lines[i] = 0; // 重置 t，实现循环运动
		        }
		    }
			
			//有损坏的高度
			if(props.damageHeight) {				
				const tMid = lines[0] + 0.1; // 出现的位置
						
				const midPoint = getBezierPoint(tMid);
				const midTangent = getBezierTangent(tMid);
				const midAngle = Math.atan2(midTangent.dy, midTangent.dx);
						
				drawLine(midPoint.x, midPoint.y, midAngle, "yellow", props.arcWidth, props.damageHeight); // 绘制黄色横线
			}
		
		    requestAnimationFrame(animate); // 下一帧继续动画
		}
		
		animate(); // 启动动画
	})
</script>

<style lang="scss" scoped>
	.conveyorCanvas {
		// transform: scale(0.9);
	}
</style>